<template>
  <view class="Introduction">
    <view class="topImg"><image src="/static/Introduction/banner.png" mode="scaleToFill"></image></view>
    <view class="content">
      <view class="content-content">
        <text>装修关键在于设计，设计第一是布局合理和人性，其次是颜色的搭配，墙面颜色，地面，以及家具的色调， 再配一些文艺画来点缀，产生温馨浪漫的效果，至于装修的价格则很大程度上取决于材料及设施的档次和品牌，对于大多数用户来说， 可能更希望花少的钱，装出最好的感觉，这就是我们的工作，当然不怕花钱那自然对我们更好，所以说装潢是美的再现，而非材料的堆积。</text>
      </view>
      <view class="content-content" style="margin-top: 20rpx;">
        <text>目前我们发现绝大多数装修公司在预算造价方面都是让业主看不懂的，看起来很细， 每项价钱似乎也都不至于太离谱，但累计相加之后结果就完全不一样了，不仅如此，中途还会找出各种理由加价以至于到最后完全超出了预算， 这让业主很苦恼，很多时候业主在乎的不是钱，不是不讲道理，如果确实是增加的工作，业主是愿意加钱的，只求不要过分，合理合情就好。</text>
      </view>
      <view class="content-content" style="margin-top: 20rpx;">
        <text>
					但事实上让业主心赌的是一个个的坑，因为毕竟业主不是搞装潢的，所以很多坑一开始是想不到的， 也是不懂的，本人也曾经吃过不少这样的亏，有人告诉我说你不能这样太明了的，不然赚不到钱的， 我说没有那个业主不想给他装修的公司赚钱的，总价是可以多比较几家的，但关键是透明，公正，这有什么不好呢，凡事要将心比心， 我说如果今天你家里装修，你希望的装修公司是什么样的，特别是现在的装修，其实都很简单，无非是做些基础装修， 因为基础装修之外的很多装修都是外面专业的人员包安装的，专业又快还保修，多好！ 所以说装修没有什么专业对酒店，专业对别墅或者什么办公空间的，这些不同的无非是设计，所以我们的装修是不分什么类型的房子， 装修就是装修，没什么神奇的。
				</text>
      </view>
      <view class="content-content" style="margin-top: 20rpx;">
        <text>
					我们公司有配套的设计师团队，设计到你满意为止；有配套的材料供应商，让材料质量有保障，出了问题可以追踪到厂家。 有全程施工现场监控，业主可以在手机上看自己的工地情况，可以直接对话现场施工师傅。我们有二十几年的优秀施工队伍， 施工管理人员，把装修交给我们，您就放心吧！正义、良知、负责永远是我们最高的宗旨。
				</text>
      </view>
      <!-- <view class="content-English">
        Shanghai Jiwang Industrial Co., Ltd. is committed to the application and development of Internet software, serving the purchasing management, sales management and staff management of small and medium-sized enterprises. Among them, the terminal version of C convenience store function is widely used in hotel rooms, convenient and fast.
      </view> -->
    </view>
    <view class="designTeam">
      <view class="top"></view>
      <view class="team">
        <view class="team-title">
          <text class="title-title">设计团队</text>
          <text class="title-english">/Design team</text>
        </view>
        <view class="buttom-list" v-for="(item, i) in team" :key="i" @click="teamInfo">
          <view class="list-list">
            <view class="list-left">
              <view class="left-img">
                <image :src="item.avatar" mode=""></image>
              </view>
              <view class="list-center">
                <view class="center-top">
                  <text class="top-title">{{ item.name }}</text>
                  <text class="top-English">/ {{ item.english }}</text>
                </view>
                <view class="center-buttom">
                  <text>{{ item.content }}</text>
                </view>
              </view>
            </view>
            <view class="list-right">
              <image src="/static/about/aeeow.png" mode="aspectFit"></image>
            </view>
          </view>
        </view>
      </view>
    </view>
    <tabBar :currentPage="'tabBar4'"></tabBar>
  </view>
</template>

<script>
import tabBar from '@/components/tabBar.vue'

export default {
  components: {
    tabBar
  },
  data() {
    return {
			team: [
				{
					avatar: '/static/Introduction/avatar.jpg',
					name: '张燕',
					english: 'Zhang Yan',
					content: '从业9年 60套案例'
				}
			]
		}
  },
  methods: {
		teamInfo() {
			uni.showToast({ title: '暂无信息', icon: 'none' })
		}
	}
}
</script>

<style lang="scss" scoped>
.Introduction {
  .topImg {
    width: 100%;
    height: 288rpx;
    image {
      width: 100%;
      height: 288rpx;
    }
  }
  .content {
    padding: 30rpx;
    .content-content {
      font-size: 30rpx;
      font-weight: bold;
      line-height: 46rpx;
      letter-spacing: 4rpx;
      color: #333333;
    }
    .content-English {
      margin-top: 40rpx;
    }
  }
  .designTeam {
    .top {
      height: 40rpx;
      background: #F6F6F6;
    }
    .team {
      padding: 30rpx;
      .team-title {
        border-bottom: 1px solid #D8D8D8;
        padding-bottom: 20rpx;
        .title-title {
          font-size: 32rpx;
          font-weight: bold;
          margin: 0 20rpx 0 20rpx;
          &:before {
            content: '';
            position: absolute;
            margin-left: -20rpx;
            width: 4rpx;
            height: 30rpx;
            background: #333333;
            margin-top: 8rpx;
          }
        }
        .title-english {
          font-size: 28rpx;
          font-weight: 400;
          color: #999999;
        }
      }
    }
    .buttom-list {
      border-bottom: 1px solid #D8D8D8;
      .list-list {
        background: #FFFFFF;
        display: flex;
        // padding: 20rpx;
        justify-content: space-between;
        margin-bottom: 20rpx;
        margin-top: 20rpx;
        .list-left {
          display: flex;
          align-items: center;
          .left-img {
            width: 80rpx;
            height: 80rpx;
            margin-right: 20rpx;
            image {
              width: 100%;
              height: 100%;
            }
          }
          .list-center {
            view {
              line-height: 60rpx;
            }
            .center-top {
              .top-title {
                font-size: 34rpx;
                font-weight: bold;
                color: #333333;
                margin-right: 20rpx;
              }
              .top-English {
                color: #333333;
                font-weight: 400;
                font-size: 28rpx;
              }
            }
            .center-buttom {
              text {
                font-size: 28rpx;
                font-weight: 400;
                color: #999999;
                margin-right: 40rpx;
              }
            }
          }
        }
        .list-right {
          display: flex;
          align-items: center;
          image {
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
    }
  }
}
</style>
